<template>
	<view class="tab__books" style="height: 100%;">
		<view class="tab__navigation">
			<scroll-view class="tab__navigation__wrapper" scroll-x="true" :show-scrollbar="false" :scroll-left="scrollLeft" :scroll-with-animation="true">
				<view class="tab__navigation__item"  v-for="tab,index in list" :key="tab.id" :class="[{selected:bookSelected==tab.id}]" @click="clickEvent(index,tab.id)">{{tab.tabName}}</view>
			</scroll-view>
			<view class="top__right">
				<slot name="top-right"></slot>
			</view>
		</view>
		<swiper class="tab__swiper"  :indicator-dots="false" :autoplay="false" :current-item-id="bookSelected+''" :duration="400"  @change="toggle">
			<swiper-item  v-for="tab,index in list" :key="tab.id" :item-id="tab.id+''">
				<!-- <slot :list="selectedList" :name="'tab-'+tab.id"></slot> -->
				<slot :list="selectedList" :name="'tab-'+index"></slot>
			</swiper-item>
		</swiper>
		<!-- <slot :list="selectedList"></slot> -->
	</view>
</template>

<script setup>
	import {ref,onMounted,computed,nextTick,} from 'vue';
	import {getQuery,getBoundingClientRect,getBoundingClientRectAll} from '@/utils/elmUtils.js';
	const props = defineProps({
		list:{
			type:Array,
			default:[],
		},
		normalFontSize:{
			type:String,
			default:"36rpx"
		},
		boldFontSize:{
			type:String,
			default:"44rpx"
		},
		isBlod:{
			type:Boolean,
			default:true
		},
		gap:{
			type:String,
			default:"40rpx"
		},
		isCenter:{
			type:Boolean,
			default:false
		}
	})
	const emits = defineEmits(["tabEvent"])
	const bookSelected=ref(null);
	let query = ref(null);
	// 获取总长度节点
	let navigationWidth = ref(null);
	// 获取所有的子节点
	let tabListRect = ref([]);
	let scrollLeft = ref(0);
	function clickEvent(index,id){
		// 设置元素居中
		if(props.isCenter){
			setElementCenter(index)
		}
		bookSelected.value=id;
		emits("tabEvent",{index,id})
	}
	
	// 切换
	function toggle(e){
		const {current:index,currentItemId:id} = e.detail;
		// 设置元素居中
		if(props.isCenter){
			setElementCenter(index)
		}
		bookSelected.value=id;
	}
	
	function setElementCenter(index){
		let target = tabListRect.value[index];
		let wdith = target.left-((navigationWidth.value-target.width)/2);
		let px = uni.upx2px(props.gap.replace("rpx",""))*2
		scrollLeft.value = wdith+(index*px);
	}

	const selectedList = computed(()=>{
		if(bookSelected.value===null)return [];
		return props.list.find(item=>item.id===bookSelected.value)
	})
	
	onMounted(()=>{
		bookSelected.value = props.list[0]?.id;
		getBoundingClientRect(null,".tab__navigation__wrapper",(res)=>{
			navigationWidth.value = res.width;
		})
		getBoundingClientRectAll(null,".tab__navigation__wrapper .tab__navigation__item",(res)=>{
			tabListRect.value = res;
		})
	
		
		
	})
</script>

<style lang="scss" scoped>
	
	.tab__books{
		display: flex;
		flex-direction: column;
		gap: v-bind("gap");
		box-sizing: border-box;
		.tab__navigation{
			display: flex;
			align-items: center;
			gap: 10rpx;
			height: 60rpx;
			font-size: v-bind("normalFontSize");
			font-weight: v-bind("isBlod?'bold':'400'");
			color: #a1a09e;
		
			.selected{
				font-size: v-bind("boldFontSize");
				color: #000;
				font-weight: bold;
			}
			&__wrapper{
				display: flex;
				align-items: center;
				flex: 1;
				box-sizing: border-box;
				overflow: hidden;
				white-space: nowrap;
				padding: 20rpx 0;
				gap: v-bind("gap");
			}
			&__item {
				height: 100%;
				display: inline-block;
				transition: all .2s linear;
				white-space: nowrap;
				padding: 10rpx 0;
				margin-right: v-bind("gap");
			}
			.top__right{
				display: flex;
				margin-left: auto;
				align-items: center;
				white-space: nowrap;
			}
			
		}
	}
	
	.tab__swiper{
		height: 100%;
	}
	
</style>